<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        :label="catalogue.catalogueName"
        :name="catalogue.catalogueId"
        v-for="catalogue in catalogueList"
        :key="catalogue.catalogueId"
      >
        <form-generator
          :display="mediaId ? 'flex' : 'grid'"
          :catalogue="catalogue"
          :isEdit="!mediaId || isEdit"
        ></form-generator>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getCatalogueEnable,
  getMediaCatalogue,
} from "@/api/system-config/catalogue";
import FormGenerator from "./components/FormGenerator";
import {
  tag2component,
  isArray,
} from "@/views/system-config/form-generate/config.js";
export default {
  name: "CatalogueForm",
  components: {
    FormGenerator,
  },
  data() {
    return {};
  },
  props: {
    mediaId: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      catalogueList: [],
      activeName: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    arrayStringFormat(arg) {
      const params = arg.argData;
      const component = tag2component[arg.argType];
      if (
        isArray.includes(component) ||
        (arg.dateDetail && arg.dateDetail.dateType === 2)
      ) {
        if (Array.isArray(params)) {
          return params.join(",");
        } else if (typeof params == "string" && params) {
          return params.split(",");
        }
      }
      return params;
    },
    init() {
      if (!this.mediaId) {
        getCatalogueEnable().then((res) => {
          this.catalogueList = res.rows;
          this.catalogueList.length &&
            (this.activeName = this.catalogueList[0].catalogueId);
        });
      } else {
        getMediaCatalogue(this.mediaId).then((res) => {
          this.catalogueList = res.map((i) => ({
            ...i,
            args: i.catalogueDataVOList.map((i) => {
            console.log(this.arrayStringFormat(i))
              return {
                ...i,
                labelData: i.argData,
                argData: this.arrayStringFormat(i),
              };
            }),
          }));
          this.catalogueList.length &&
            (this.activeName = this.catalogueList[0].catalogueId);
        });
      }
    },
    // 表单验证方法
    valueCheck() {
      const promises = [];
      for (const list of this.catalogueList) {
        for (const key of list.args) {
          if (key.mustFill) {
            if (!key.argData) {
              promises.push(
                Promise.reject(`${list.catalogueName}下的${key.argTitle}必填`)
              );
            }
          } else {
            promises.push(Promise.resolve());
          }
        }
      }
      return promises;
    },
    getFormVal() {
      return new Promise((resolve, reject) => {
        Promise.all(this.valueCheck())
          .then((res) => {
            // 读取数据前先清空表单数据
            const catalogueData = [];
            // 循环读取表单数据
            for (const list of this.catalogueList) {
              for (const key of list.args) {
                catalogueData.push({
                  argData: this.arrayStringFormat(key) || "",
                  argId: key.argId,
                  catalogueId: key.catalogueId,
                  mediaId: key.mediaId,
                  dataId: key.dataId,
                });
              }
            }
            resolve(catalogueData);
          })
          .catch((err) => {
            this.$message.error(err);
            reject(false);
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
